<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="上传作品" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<block v-if="canEdit">
			<view class="baibox" >
				<view class="put display-flex just-between">
					<input type="text" placeholder="请输入标题..." maxlength="20" v-model="form.title">
					<text style="font-size: 24rpx;color: #9E9E9E;">{{ 20 - form.title.length}}</text>
				</view>
				
				<textarea class="area" maxlength="10000000000000" placeholder="请输入正文..." v-model="form.row"></textarea>
			
				<view class="imgView">
					<!-- <view v-for="(img,index) in form.img" class="imgList">
						<image :src="img | formatImgUrl" mode="aspectFill" style="width: 190rpx;height: 190rpx;"></image>
						<view class="imgClose" @click="deletePic(index)">×</view>
					</view>
					<image :src="'/images/up.png' | formatImgUrl" mode="widthFix" style="width: 190rpx;height: 190rpx;"
						@click="onChooseImg" v-if="form.img.length < 9"></image> -->
					<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="9" width="95" height="95" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
					</u-upload>
				</view>
			</view>
			
			<view class="subbox" @click="saveCv">
				提交
			</view>
			<view class="xubox" style="margin-top: 30rpx;">
				<view class="xutxt">
					上传须知:<br>
					1、点击提交后仍然可以阅读和修改稿件，用户无法查看稿件内容。点击上传完成后，将无法修改稿件，同时用户可以查看稿件内容。点击返回编辑，可再次编辑稿件。<br>
					2、上传的稿件需要符合订单需求，请勿上传与用户要求无关的内容，如上传内容与订单无关，可能涉及刷单。如订单为打赏、补价等无需提交真实内容的订单，应提醒用户选择直接完成订单。<br>
					3、请在约定时间内上传完整稿件，如超时订单将进入异常状态，平台会重点关注。<br>
					4、如用户提交合理修改意见，应当配合对稿件进行修改。为保护自身与写手双方权益，修改稿件时，请使用平台的修改功能。所有订单流程外的私下改稿均不受平台保护。<br>
					5、如订单发生争议，可与用户沟通，积极解决问题。如沟通未果可到【我的】-【订单查询】选择该订单，在【更多操作】进行订单申诉。<br>
					6、请阅读并同意<text @click.stop="goToOtherxie(3)">《平台约文服务协议及指南》</text><text @click.stop="goToOtherxie(8)">《写手违规管理办法》</text>。
				</view>
			</view>
		</block>
		<block v-else>
			<view class="baibox" >
				<view class="put">
					{{form.title || '请输入标题...'}}
				</view>
				<view  class="area">
					{{form.row  || '请输入正文...'}}
				</view>
			
				<view class="imgView">
					<view v-for="(img,index) in form.img" class="imgList">
						<image :src="img | formatImgUrl" mode="aspectFill" style="width: 190rpx;height: 190rpx;"></image>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: 0,
				form: {
					title: '',
					row: '',
					img: []
				},
				is_gai: '',
				canEdit: false,
				fileList2: []
			}
		},
		onShow() {
			
		},
		onLoad(e) {
			if(!e.form && this.$db.get('form')){
				this.form = this.$db.get('form')
				this.fileList2 = this.$db.get('fileList2')
			}
			
			if (e.id) {
				this.id = e.id
				this.getInfo()
			}
			
			this.is_gai = e.is_gai || ''
			this.canEdit = e.canEdit
		},
		methods: {
			saveCv(){
				let canEdit = this.canEdit
				this.form.img = this.fileList2
				
				this.$api.default.request('order/saveOrderCv', this.form, 'POST', false).then((res) => {
					if (res.code) {
						this.$db.set('fileList2',res.data.img)
						
						let img = res.data.img
						let imgArr = []
						for(let i in img){
							imgArr.push({
								thumb: img[i]
							})
						}
						
						let form = {
							title: res.data.title,
							row: res.data.row,
							img: imgArr
						}
						this.$db.set('form',form)
						
						
						uni.navigateTo({
							url:'/pages/my/write?id='+this.id + '&is_gai=' + this.is_gai + '&canEdit=' + canEdit
						})
					}
				})
				
			},
			getInfo() {
				this.$api.default.request('order/getCvInfo', {
					oid: this.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						if (res.data) {
							this.form = res.data
							this.fileList2 = res.data.img
							
							let img = res.data.img
							let imgArr = []
							for(let i in img){
								imgArr.push({
									thumb: img[i]
								})
							}
							
							this.form.img = imgArr
							
							
						} else {
							this.form = {
								oid: this.id,
								title: '',
								row: '',
								img: []
							}
						}
					}
				})
			},
			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			onChooseImg() {
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding-top: 18rpx;

		.baibox {
			background-color: #ffffff;
			padding: 40rpx 60rpx 20rpx;
			margin-bottom: 20rpx;

			.put {
				width: 610rpx;
				font-size: 28rpx;
				color: #3d3d3d;
				padding: 0 8rpx 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			}

			.area {
				width: 610rpx;
				padding: 20rpx 8rpx;
				max-height: 500rpx;
				min-height: 200rpx;
				resize: none;
				font-size: 28rpx;
				color: #3d3d3d;
			}

			.imgView {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.imgList:nth-child(3n){
					margin-right: 0;
				}
				.imgList {
					position: relative;
					padding-bottom: 10rpx;
					margin-right: 31rpx;
					.imgClose {
						position: absolute;
						top: -8px;
						right: -8px;
						z-index: 1;
						width: 36rpx;
						height: 36rpx;
						background-color: #45C4B0;
						color: #fff;
						line-height: 36rpx;
						text-align: center;
						border-radius: 100px;
					}
				}

				.imgList:not(:first-child) {
					// margin-left: 15rpx;
				}
			}

			.zebox {
				margin-top: 20rpx;
				height: 38rpx;
				border-radius: 18px;
				opacity: 1;
				background: rgba(153, 153, 153, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 170rpx;

				.zepic {
					width: 32rpx;
					height: 32rpx;
				}

				.zetxt {
					font-size: 24rpx;
					font-weight: normal;
					letter-spacing: 0.08em;
					color: #3D3D3D;
					padding-left: 8rpx;
				}
			}
		}

		.subbox {
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			text-align: center;
			margin: 0 auto;
			line-height: 86rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	.xubox {
		padding: 0 30rpx;
	
		.xutxt {
			font-size: 20rpx;
			line-height: 37rpx;
			font-weight: normal;
			letter-spacing: 0em;
			color: #999999;
		}
	}
</style>